<template>
  <div ref="map" @dblclick="mapDblclick"
       :style="`position: relative;height:${mapBSize.height};width:${mapBSize.width};-moz-background-size:100% 100%; background-size:100% 100%;background-repeat:no-repeat;background-image:url('${mapInfo.mapUrl}')`">
    <el-button-group size="mini" >
      <el-button type="info" plain size="mini" @dblclick.stop="ddd" @click.stop="toAdd">+</el-button>
      <el-button type="info" plain size="mini" @dblclick.stop="ddd" >{{currentTimes}}%</el-button>
      <el-button type="info" plain size="mini"  @dblclick.stop="ddd"  @click.stop="toMov">-</el-button>
    </el-button-group>
    <div v-for="item in data" v-x="item"
         :style="`left:${item.positionLeft}%;top:${item.positionTop}%;width:${currentTimes*30/100}px;height:${currentTimes*30/100}px;position:absolute`"
         :key="item.id" @dblclick.stop="to(item)">
      <svg-icon :icon-class="item.deviceType"></svg-icon>
      <div v-for="(pItem,index) in item.people"
           :style="`left:${Math.random()*50*currentTimes/100}px;top:${Math.random()*50*currentTimes/100}px;width:${currentTimes*20/100}px;height:${currentTimes*20/100}px;position:absolute;background-size:100% 100%;background-repeat:no-repeat;background-image:url('${pItem.path?pngs[pItem.path]:pngs['jingbao']}')`"
           :key="pItem.terminal_code">
      </div>
    </div>
    <eForm ref="form" :mapInfo="mapInfo" :dict="dict" :position_this="position_this" :is-add="isAdd"/>
  </div>
</template>
<script>
  import {info} from '@/api/deviceMap'
  import {list, add, edit, getDict} from '@/api/devicePosition'
  import eForm from '@/views/map/deviceposition/module/form'
  import jingbao from '@/assets/img/jingbao.png'
  import putong from '@/assets/img/putong.png'
  import guanli from '@/assets/img/guanli.png'
  import fangke from '@/assets/img/fangke.png'
  export default {
    components: {eForm},
    props: {
      mapInfo: {
        type: Object,
        required: true
      }, mapWH: {
        type: Object,
        required: true
      }
    },
    data(){
      return {
        dict: {},
        currentTimes:100,
        times:25,
        pngs:{
          jingbao: jingbao,
          putong:putong,
          guanli:guanli,
          fangke:fangke
        },
        mapSize: {width: '100%', height: 'calc(100vh - 125px)'},
        mapBSize:{width: '100%', height: 'calc(100vh - 125px)'},
        data: [],
        isAdd:true,
        position_this: this
      }
    },
    computed: {},
    created() {
      this.$nextTick(() => {
        this.list();
      })
    },
    mounted(){
      var tt = this.$refs.map
      if (tt.offsetWidth > 0) {
        this.mapWH.width = tt.offsetWidth;
      }
      if (tt.offsetHeight > 0) {
        this.mapWH.height = tt.offsetHeight;
      }
      if (this.mapWH.width / this.mapWH.height >= this.mapInfo.mapWidth / this.mapInfo.height) {
        this.mapSize.width = this.mapWH.width;
        this.mapSize.height = this.mapInfo.mapHeight * this.mapWH.width / this.mapInfo.mapWidth;
      } else {
        this.mapSize.height = this.mapWH.height;
        this.mapSize.width = this.mapInfo.mapWidth * this.mapWH.height / this.mapInfo.mapHeight;
      }
      this.mapBSize.height=this.mapSize.height+"px";
      this.mapBSize.width=this.mapSize.width+"px";
    },
    directives: {
      x: {
        bind: function (el, binding, vnode, oldVnode) {
          el.style.cursor = 'move';
          el.style["font-size"] = '30px';
          el.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - el.offsetLeft;
            const disY = e.clientY - el.offsetTop;
            const mouseX = e.clientX;
            const mouseY = e.clientY;
            document.onmousemove = function (e) {
              // 通过事件委托，计算移动的距离
              const div_width = el.parentNode.clientWidth;
              const div_height = el.parentNode.clientHeight;
              let left = e.clientX - disX;
              let top = e.clientY - disY;
              if (left < 0) {
                left = 0;
              }
              if (left > div_width - 30) {
                left = div_width - 30;
              }
              if (top < 0) {
                top = 0;
              }
              if (top > div_height - 30) {
                top = div_height - 30;
              }
              const l = left / div_width * 100;
              const t = top / div_height * 100;
              // 移动当前元素
              binding.value.positionLeft = l;
              binding.value.positionTop = t;
            };

            document.onmouseup = function (e) {
                if(mouseX != e.clientX&&mouseY != e.clientY){
                  edit(binding.value);
                }
              document.onmousemove = null;
              document.onmouseup = null;
            };
          }
        }
      }
    }, methods: {
      ddd(){},
      toAdd(){
        this.currentTimes += this.times;
        if(this.currentTimes>200){
            alert("最大不能超过200");
        }else{
          this.mapBSize.height = this.mapSize.height*this.currentTimes/100+"px";
          this.mapBSize.width =  this.mapSize.width*this.currentTimes/100+"px";
        }
        console.log(this.mapSize)
      },
      toMov(){
        this.currentTimes = this.currentTimes-this.times;
        if(this.currentTimes<0){
          alert("最大不能小于0");
        }else{
          this.mapBSize.height = this.mapSize.height*this.currentTimes/100+"px";
          this.mapBSize.width =  this.mapSize.width*this.currentTimes/100+"px";
        }
        console.log(this.mapSize)
      },
      list(){
        list(this.mapInfo.id).then(res => {
          this.data = res
        }).catch(err => {
          console.log(err.response.data.message)
        })
      },
      doEdit(form) {
        console.log(form);
        edit(form).then(res => {
          this.resetForm()
          this.$notify({
            title: '变更成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      }, to(form) {
        this.isAdd=false;
        this.$nextTick(() => {
          getDict().then(res => {
            this.dict = res;
            this.dict.deviceTypeDict = {};
            res.device.forEach(item => {
              this.dict.deviceTypeDict[item.device_type] = item.label
            });
          }).catch(err => {
            console.log(err.response.data.message)
          });
        });
        const _this = this.$refs.form;
        _this.form = {
          id: form.id,
          mapId: form.mapId,
          deviceId: form.deviceId,
          deviceUid: form.deviceId + "_" + form.deviceType,
          deviceSUid: form.deviceId + "_" + form.deviceType,
          deviceType: form.deviceType,
          positionLeft: form.positionLeft,
          positionTop: form.positionTop,
          creator: form.creator,
          createTime: form.createTime,
          updator: form.updator,
          updateTime: form.updateTime
        }
        _this.dialog = true
      },mapDblclick(e) {
        this.isAdd=true;
        const left = e.offsetX;
        const top = e.offsetY;
        const l = left / this.$refs.map.clientWidth * 100;
        const t = top / this.$refs.map.clientHeight * 100;
        let flag = false;
        this.$nextTick(() => {
          getDict().then(res => {
            this.dict = res;
            this.dict.deviceTypeDict = {};
            res.device.forEach(item => {
              this.dict.deviceTypeDict[item.device_type]=item.label
              if(!item.position_id){
                  flag=true;
                  console.log("changele")
              }
            });
            if(!flag){
              this.$notify({
                title: '没有设备可添加',
                type: 'warning',
                duration: 2500
              })
            }
            const _this = this.$refs.form
            _this.form = {
              id: '',
              mapId: this.mapInfo.id,
              deviceId: '',
              deviceUid: '',
              deviceSUid:  '',
              deviceType: '',
              positionLeft: l,
              positionTop:  t,
              creator: '',
              createTime: '',
              updator: '',
              updateTime:  ''
            }
            _this.dialog = flag
          }).catch(err => {
            console.log(err.response.data.message)
          });
        })
      }
    }
  }
</script>
<style scoped>
  .div_a {
    width: 100px;
    height: 100px;
    background-color: black;
    position: fixed;
  }

  .el-tabs__header{
    margin: 0px !important;
  }
</style>
